<template>
  <div>
    <Card>
      <Collapse style="margin-bottom:15px;">
        <Panel>查询
          <div slot="content">
            <Form
              ref="formTybkCorporate"
              :model="formTybkCorporate"
              label-position="right"
              :label-width="80"
              inline
            >

              <FormItem label="员工姓名" prop="staff_id">
                <Input type="text" v-model="formTybkCorporate.staff_name" placeholder="员工姓名"/>
              </FormItem>
              <FormItem label="客户姓名" prop="cooperation_name">
                <Input type="text" v-model="formTybkCorporate.cooperation_name" placeholder="客户姓名"/>
              </FormItem>
              <FormItem label="公司名称" prop="corporate_name">
                <Input type="text" v-model="formTybkCorporate.corporate_name" placeholder="公司名称"/>
              </FormItem>
              <FormItem label="联系人" prop="cooperation_contacts">
                <Input type="text" v-model="formTybkCorporate.cooperation_contacts" placeholder="联系人"/>
              </FormItem>
              <FormItem label="联系电话" prop="cooperation_phone">
                <Input type="text" v-model="formTybkCorporate.cooperation_phone" placeholder="联系电话"/>
              </FormItem>
              <FormItem label="邮箱" prop="corporate_mailbox">
                <Input type="text" v-model="formTybkCorporate.corporate_mailbox" placeholder="邮箱"/>
              </FormItem>
              <FormItem label="主营业务描述" prop="corporate_business_description">
                <Input type="text" v-model="formTybkCorporate.corporate_business_description" placeholder="主营业务描述"/>
              </FormItem>
              <FormItem label="需要的资质" prop="corporate_qualifications_required">
                <Input type="text" v-model="formTybkCorporate.corporate_qualifications_required" placeholder="需要的资质"/>
              </FormItem>
              <FormItem label="跟进记录" prop="corporate_record">
                <Input type="text" v-model="formTybkCorporate.corporate_record" placeholder="跟进记录"/>
              </FormItem>
              <FormItem label="是否成交(0未成交1已成交)" prop="corporate_Isdeal">
                <InputNumber v-model="formTybkCorporate.corporate_Isdeal" placeholder="是否成交(0未成交1已成交)"/>

                <Select v-model="formTybkCorporate.corporate_Isdeal" style="width:200px">
                  <Option value="0">未成交 </Option>
                  <Option value="1">成交</Option>
                </Select>
              </FormItem>
              <FormItem label="合同金额" prop="corporate_contract_amount">
                <Input type="text" v-model="formTybkCorporate.corporate_contract_amount" placeholder="合同金额"/>
              </FormItem>
              <FormItem label="可推荐资质" prop="corporate_recommended_qualification">
                <Input type="text" v-model="formTybkCorporate.corporate_recommended_qualification" placeholder="可推荐资质"/>
              </FormItem>
              <FormItem label="回访记录" prop="corporate_return_visit">
                <Input type="text" v-model="formTybkCorporate.corporate_return_visit" placeholder="回访记录"/>
              </FormItem>

              <FormItem>
                <Button type="primary" @click="handleSubmit('formTybkCorporate')">查询</Button>
                <Button @click="handleReset('formTybkCorporate')" style="margin-left: 8px">重置</Button>
              </FormItem>
            </Form>
          </div>
        </Panel>
      </Collapse>
      <ButtonGroup style="margin-bottom: 15px;">
        <Button @click="handleOpenPage('add')">添加</Button>
        <Add v-model="isOpenAddPage" @addRow="addTybkCorporate"/>
        <Edit v-model="isOpenEditPage" @updateRow="updateTybkCorporate" :tybkCorporate="editTybkCorporate"/>
        <Button @click="batchDelete()">删除</Button>
      </ButtonGroup>
      <Table
        ref="tableTybkCorporate"
        :data="tableData"
        :columns="columns"
        @on-selection-change="onSelectionChange"
        @on-sort-change="onSortChange"
      />
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page
            :total="total"
            :current="current"
            :page-size="pageSize"
            @on-page-size-change="changePageSize"
            @on-change="changePage"
            :show-total="true"
            show-sizer
          ></Page>
        </div>
      </div>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
import { list, del, batchDelete,getAllQualifications} from '@/api/corporate'
import { createFormObj } from '@/libs/util'

import Add from './add.vue'
import Edit from './edit.vue'

export default {
  name: 'TybkCorporate',
  components: {
    Add,
    Edit
  },
  data () {
    return {
      formTybkCorporate: {

        id: ''
        ,
        staff_name: ''
        ,
        cooperation_name: ''
        ,
        corporate_name: ''
        ,
        cooperation_contacts: ''
        ,
        cooperation_phone: ''
        ,
        corporate_mailbox: ''
        ,
        corporate_business_description: ''
        ,
        corporate_qualifications_required: ''
        ,
        corporate_record: ''
        ,
        corporate_Isdeal: null
        ,
        corporate_contract_amount: ''
        ,
        corporate_recommended_qualification: ''
        ,
        corporate_return_visit: ''
        ,
        deleted: null
        ,
        create_time: ''
        ,
        modification_time: ''
        ,
        deletion_time: ''
      },
      columns: [
        { type: 'selection', width: 60, align: 'center' },
        { key: 'staff_name', title: '员工姓名', sortable: true },
        { key: 'cooperation_name', title: '客户姓名', sortable: true },
        { key: 'corporate_name', title: '公司名称', sortable: true },
        { key: 'cooperation_contacts', title: '联系人', sortable: true },
        { key: 'cooperation_phone', title: '联系电话', sortable: true },
        { key: 'corporate_mailbox', title: '邮箱', sortable: true },
        { key: 'corporate_business_description', title: '主营业务描述', sortable: true },
        { key: 'corporate_qualifications_required', title: '需要的资质', sortable: true },
        { key: 'corporate_record', title: '跟进记录', sortable: true },
        { key: 'corporate_Isdeal', title: '是否成交)', sortable: true
            ,render: (h, params) => {
            switch (params.row.corporate_Isdeal) {
              case 0:
                return h('span', '0未成交')
                break;
              case 1:
                return h('span', '已成交')
                break;
            }
          }
        },
        { key: 'corporate_contract_amount', title: '合同金额', sortable: true },
        { key: 'qualifications_name', title: '可推荐资质', sortable: true },
        { key: 'corporate_return_visit', title: '回访记录', sortable: true },
        {
          title: '操作',
          key: 'action',
          width: 250,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      //自定义代码
                    }
                  }
                },
                '自定义'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editTybkCorporate = params.row
                      this.handleOpenPage('edit')
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '<p>确定删除吗?</p>',
                        onOk: () => {
                          del({ 'tybkCorporate.id': params.row.id }).then(res => {
                            if (res) {
                              this.tableData.splice(params.index, 1);
                            }
                          });
                        },
                        onCancel: () => {}
                      });
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      tableData: [],
      total: 0,
      current: 1,
      pageSize: 10,
      isOpenAddPage: false,
      isOpenEditPage: false,
      editTybkCorporate: {},
      selection: []
    }
  },
  methods: {
    getAllQualificationsClick(){
      getAllQualifications().then(res=>{
        // console.log(res,'数据')
      })
    },
    handleSubmit (name) {
      // 查询按钮事件
      this.getTybkCorporateList(this.current, this.pageSize)
      this.$Message.success('Success!')
    },
    handleReset (name) {
      // 重置按钮事件
      this.$refs[name].resetFields()
    },
    handleOpenPage (name) {
      // 打开页面事件(添加页,编辑页...)
      if (name === 'add') this.isOpenAddPage = true
      else if (name === 'edit') {
        this.isOpenEditPage = true
      }
    },
    addTybkCorporate (row) {
      this.tableData.push(row)
      this.getTybkCorporateList(this.current, this.pageSize)
    },
    updateTybkCorporate (row) {
      this.$set(this.tableData, row._index, row)
      this.getTybkCorporateList(this.current, this.pageSize)
    },
    batchDelete () {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定删除吗?</p>',
        onOk: () => {
          if (this.selection.length > 0) {
            let ids = ''
            for (var i = 0; i < this.selection.length; i++) {
              ids += '\'' + this.selection[i].id + '\''
              if (i != this.selection.length - 1) {
                ids += ','
              }
            }
            batchDelete({ ids: ids }).then(res => {
              for (var i = 0; i < this.selection.length; i++) {
                this.tableData = this.tableData.filter(
                  item => item.id !== this.selection[i].id
                )
              }
            })
          } else {
            this.$Message.error('未选中记录!')
          }
        },
        onCancel: () => {}
      });
    },
    getTybkCorporateList (current, pageSize, paras) {
      let para = { pageNumber: current, pageSize: pageSize }
      if (paras) Object.assign(para, paras)

      list(this.handleRequestParams(para)).then(res => {
        this.tableData = res.list
        this.current = parseInt(res.pageNumber)
        this.pageSize = parseInt(res.pageSize)
        this.total = parseInt(res.totalRow)
      })
    },
    handleRequestParams (para) {
      Object.assign(para, createFormObj(this.formTybkCorporate, 'tybkCorporate'))
      return para
    },
    exportExcel () {
      this.$refs.tableTybkCorporate.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      })
    },
    changePage (pageNumber) {
      this.getTybkCorporateList(pageNumber, this.pageSize)
    },
    changePageSize (pageSize) {
      this.getTybkCorporateList(this.current, pageSize)
    },
    remove (index) {
      this.data6.splice(index, 1)
    },
    onSelectionChange (selection) {
      this.selection = selection
    },
    onSortChange (obj) {
      if (obj.order === 'normal') {
        this.getTybkCorporateList(1, this.pageSize)
      } else {
        this.getTybkCorporateList(1, this.pageSize, {
          field: obj.key,
          order: obj.order
        })
      }
    }
  },
  mounted () {
    this.getTybkCorporateList(this.current, this.pageSize)
    this.getAllQualificationsClick();
  }
}
</script>

<style>
</style>
